<script lang="ts">
  import {BadgeType} from "./type";

  export let type: BadgeType = BadgeType.college
  export let label: string = ''
  export let active: boolean = false
</script>

<div class="relative w-full flex align-center">
  <div class="w-full aspect-square mb-2">
    {#if active}
      <div class="bg-{type}-active badge-img"></div>
    {:else }
      <div class="bg-{type} badge-img"></div>
    {/if}
  </div>
  <div class="flex absolute right-0 bottom-0 left-0 items-center mx-2 text-xs text-center label color-7d7d7d bg-label">
    <div class="w-full truncate text-xs 2xl:text-sm 3xl:text-xl 4xl:text-4xl"
         class:color-00f7f1={active}>{label}</div>
  </div>
</div>

<style>

  .badge-img {
    @apply w-full h-full bg-center bg-no-repeat bg-contain;
  }

  .bg-college {
    background-image: url('./college.png');
  }

  .bg-college-active {
    background-image: url('./college-active.png');
  }

  .bg-factory {
    background-image: url('./factory.png');
  }

  .bg-factory-active {
    background-image: url('./factory-active.png');
  }

  .color-00f7f1 {
    color: #00f7f1;
  }

  .color-7d7d7d {
    color: #7d7d7d;
  }

  .bg-label {
    aspect-ratio: 404 / 88;
    background-image: url("./label-bg.png");
    @apply bg-center bg-no-repeat bg-contain;
  }
</style>